 <!--工作量变更-->

<template>
  <el-row :gutter="6">
    <myAnnounceDlg @operationSucc="operationState($event)" :configs="myAnnounceDlgConfig"></myAnnounceDlg>
    <el-col :span="24" class="col-flex">
      <el-col class="breadcrumb-container">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/contract' }">合同管理</el-breadcrumb-item>
          <el-breadcrumb-item>工作量变更</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
      <!-- 主要操作区域 -->
      <el-col v-loading="config.loading" class="maincont-container">
        <div class="tab-container" v-if="config.tabShow">
          <el-tabs v-model="tabConfig.activeName">
            <el-tab-pane name="todo">
              <span slot="label">
                我的待办
                <el-badge
                  v-if="config.todoCount>0"
                  :value="config.todoCount"
                  style="margin-left:2px"
                ></el-badge>
              </span>
              <my-tableX
                v-if="tabConfig.activeName==='todo'"
                :configs="todoConfig.configs"
                :tableData="todoConfig.data"
                @dataAdd="addNewApply"
                @dataEdit="handleTodo"
              ></my-tableX>
            </el-tab-pane>
            <el-tab-pane label="运行记录" name="run">
              <my-tableX
                v-if="tabConfig.activeName==='run'"
                :configs="runingTaskConfig.configs"
                :tableData="runingTaskConfig.data"
                @dataView="viewDetail"
              ></my-tableX>
            </el-tab-pane>
            <el-tab-pane label="历史记录" name="finish">
              <my-tableX
                v-if="tabConfig.activeName==='finish'"
                :configs="completedTaskConfig.configs"
                :tableData="completedTaskConfig.data"
                @dataView="viewDetail"
              ></my-tableX>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="flow-container" v-if="!config.tabShow">
          <div class="flow-step fix">
            <my-stepX :configs="flowConfig.stepConfig"></my-stepX>
          </div>
          <div class="flow-form scrollable">
            <el-form
              ref="flowFormData"
              :validate-on-rule-change="false"
              :model="flowFormData"
              label-width="0px"
              size="small"
              :rules="flowConfig.currentRule"
            >
              <h4 class="form-title">{{flowConfig.formTitle}}</h4>
              <table border="1px" cellpadding="0" cellspacing="0" class="form-data">
                <tr align="center">
                  <td class="form-label" colspan="2" width="20%">编号</td>
                  <td colspan="2" width="20%">
                    <el-input
                      placeholder="自动生成"
                      readonly
                      v-model="flowFormData.workloadId"
                      size="small"
                    ></el-input>
                  </td>
                  <td class="form-label" colspan="2" width="20%">勘察标段/勘察单位</td>
                  <td colspan="4" width="40%">
                    <el-input readonly type="text" size="small" v-model="flowFormData.tenders"></el-input>
                  </td>
                </tr>
                <tr align="center">
                  <td class="form-label" colspan="2" width="20%">工程编号</td>
                  <td colspan="2" width="20%">
                    <el-form-item :show-message="false" prop="projectId">
                      <el-select
                        v-model="flowFormData.projectId"
                        @change="changeProjectId"
                        placeholder="请选择工程编号"
                        :disabled="flowConfig.currentRule!=flowConfig.rules.node_1||flowConfig.formState.readonly"
                      >
                        <el-option
                          v-for="item in dictData.prolist"
                          :key="item.projectId"
                          :label="item.projectId"
                          :value="item.projectId"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </td>
                  <td class="form-label" colspan="2" width="20%">工程名称</td>
                  <td colspan="4" width="40%">
                    <el-input
                      placeholder="自动填写"
                      v-model="flowFormData.projectName"
                      size="small"
                      readonly
                    ></el-input>
                  </td>
                </tr>
                <!-- <tr align="center">
                  <td class="form-label" colspan="2" width="20%">工程编号</td>
                  <td colspan="2" width="20%">
                    <el-input
                      readonly
                      placeholder="自动填写"
                      size="small"
                      v-model="flowFormData.projectId"
                    ></el-input>
                  </td>
                  <td class="form-label" colspan="2" width="20%">工程名称</td>
                  <td colspan="4" width="40%">
                    <el-form-item :show-message="false" prop="projectName">
                      <el-select
                        v-model="flowFormData.projectName"
                        @change="changeProjectName"
                        placeholder="请选择工程"
                        :disabled="flowConfig.currentRule!=flowConfig.rules.node_1||flowConfig.formState.readonly"
                      >
                        <el-option
                          v-for="item in dictData.prolist"
                          :key="item.projectName"
                          :label="item.projectName"
                          :value="item.projectName"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </td>
                </tr>-->
                <tr align="center">
                  <td class="form-label" colspan="2" width="20%">主送单位</td>
                  <td colspan="8" width="80%">
                    <el-form-item label-width="0" :show-message="true" prop="mainSending">
                      <el-select
                        :disabled="flowConfig.currentRule!==flowConfig.rules.node_1||flowConfig.formState.readonly"
                        v-model="flowFormData.mainSending"
                        placeholder="请选择业主单位"
                      >
                        <el-option label="北京京投交通枢纽投资有限公司" value="北京京投交通枢纽投资有限公司"></el-option>
                      </el-select>
                    </el-form-item>
                  </td>
                </tr>
                <tr align="center">
                  <td class="form-label" colspan="2" width="20%">抄送单位</td>
                  <td colspan="8" width="80%">
                    <el-form-item :show-message="false" prop="copySending">
                      <el-select
                        multiple
                        v-model="copySendingArr"
                        :disabled="flowConfig.currentRule!==flowConfig.rules.node_1||flowConfig.formState.readonly"
                        @change="copySendingChange"
                        placeholder="请选择勘察总体/咨询单位"
                      >
                        <el-option label="北京市勘察设计研究院有限公司" value="北京市勘察设计研究院有限公司"></el-option>
                      </el-select>
                    </el-form-item>
                  </td>
                </tr>

                <tr align="center">
                  <td class="form-label" colspan="2" width="20%">记录人</td>
                  <td colspan="2" width="20%">
                    <el-form-item :show-message="false" prop="applicant">
                      <el-input
                        v-model="flowFormData.applicant"
                        :readonly="flowConfig.currentRule!=flowConfig.rules.node_1||flowConfig.formState.readonly"
                      ></el-input>
                    </el-form-item>
                  </td>
                  <td class="form-label" colspan="2" width="20%">记录时间</td>
                  <td colspan="4" width="40%">
                    <el-form-item :show-message="false">
                      <el-input readonly v-model="flowFormData.createTime"></el-input>
                    </el-form-item>
                  </td>
                </tr>
                <tr align="center">
                  <td class="form-label" colspan="2" width="20%">总体确认人</td>
                  <td colspan="2" width="20%">
                    <el-form-item :show-message="false" prop="overallConfirmingPerson">
                      <el-input
                        v-model="flowFormData.overallConfirmingPerson"
                        :readonly="flowConfig.currentRule!==flowConfig.rules.node_2||flowConfig.formState.readonly"
                      ></el-input>
                    </el-form-item>
                  </td>
                  <td class="form-label" colspan="2" width="20%">确认时间</td>
                  <td colspan="4" width="40%">
                    <el-form-item :show-message="false">
                      <el-input readonly v-model="flowFormData.overallConfirmingDate"></el-input>
                    </el-form-item>
                  </td>
                </tr>
                <tr align="center">
                  <td class="form-label" colspan="2" width="20%">咨询确认人</td>
                  <td colspan="2" width="20%">
                    <el-form-item :show-message="false" prop="consultantConfirmingPerson">
                      <el-input
                        v-model="flowFormData.consultantConfirmingPerson"
                        :readonly="flowConfig.currentRule!==flowConfig.rules.node_3||flowConfig.formState.readonly"
                      ></el-input>
                    </el-form-item>
                  </td>
                  <td class="form-label" colspan="2" width="20%">确认时间</td>
                  <td colspan="4" width="40%">
                    <el-form-item :show-message="false">
                      <el-input readonly v-model="flowFormData.consultantConfirmingDate"></el-input>
                    </el-form-item>
                  </td>
                </tr>
                <tr align="center">
                  <td class="form-label" colspan="2" width="20%">业主确认人</td>
                  <td colspan="2" width="20%">
                    <el-form-item :show-message="false" prop="ownerConfirmingPerson">
                      <el-input
                        v-model="flowFormData.ownerConfirmingPerson"
                        :readonly="flowConfig.currentRule!==flowConfig.rules.node_4||flowConfig.formState.readonly"
                      ></el-input>
                    </el-form-item>
                  </td>
                  <td class="form-label" colspan="2" width="20%">确认时间</td>
                  <td colspan="4" width="40%">
                    <el-form-item :show-message="false">
                      <el-input readonly v-model="flowFormData.ownerConfirmingDate"></el-input>
                    </el-form-item>
                  </td>
                </tr>

                <tr align="center">
                  <td
                    class="form-label"
                    height="34px"
                    colspan="10"
                    width="100%"
                  >工作量变化情况 (请对应填写变化数量，正数为增加，负数为减少)</td>
                </tr>
                <tr align="center">
                  <td class="form-label" colspan="2" width="20%">钻孔数量(个)</td>
                  <td colspan="2" width="20%">
                    <el-form-item :show-message="false" prop="drill">
                      <el-input
                        type="number"
                        v-model="flowFormData.drill"
                        :readonly="flowConfig.currentRule!==flowConfig.rules.node_1||flowConfig.formState.readonly"
                      ></el-input>
                    </el-form-item>
                  </td>
                  <td class="form-label" colspan="2" width="20%">钻孔进尺(米)</td>
                  <td colspan="4" width="40%">
                    <el-form-item :show-message="false">
                      <el-input
                        type="number"
                        v-model="flowFormData.drillFootage"
                        :readonly="flowConfig.currentRule!==flowConfig.rules.node_1||flowConfig.formState.readonly"
                      ></el-input>
                    </el-form-item>
                  </td>
                </tr>
                <tr align="center">
                  <td class="form-label" colspan="2" width="20%">监测井数量(个)</td>
                  <td colspan="2" width="20%">
                    <el-form-item :show-message="false" prop="monitoringWell">
                      <el-input
                        type="number"
                        v-model="flowFormData.monitoringWell"
                        :readonly="flowConfig.currentRule!==flowConfig.rules.node_1||flowConfig.formState.readonly"
                      ></el-input>
                    </el-form-item>
                  </td>
                  <td class="form-label" colspan="2" width="20%">监测井进尺(米)</td>
                  <td colspan="4" width="40%">
                    <el-form-item :show-message="false">
                      <el-input
                        type="number"
                        v-model="flowFormData.monitoringWellFootage"
                        :readonly="flowConfig.currentRule!==flowConfig.rules.node_1||flowConfig.formState.readonly"
                      ></el-input>
                    </el-form-item>
                  </td>
                </tr>
                <tr align="center">
                  <td class="form-label" colspan="2" width="20%">测试井数量(个)</td>
                  <td colspan="2" width="20%">
                    <el-form-item :show-message="false" prop="testWell">
                      <el-input
                        type="number"
                        v-model="flowFormData.testWell"
                        :readonly="flowConfig.currentRule!==flowConfig.rules.node_1||flowConfig.formState.readonly"
                      ></el-input>
                    </el-form-item>
                  </td>
                  <td class="form-label" colspan="2" width="20%">测试井进尺(米)</td>
                  <td colspan="4" width="40%">
                    <el-form-item :show-message="false">
                      <el-input
                        type="number"
                        v-model="flowFormData.testWellFootage"
                        :readonly="flowConfig.currentRule!==flowConfig.rules.node_1||flowConfig.formState.readonly"
                      ></el-input>
                    </el-form-item>
                  </td>
                </tr>
                <tr align="center">
                  <td class="form-label" height="34px" colspan="10" width="100%">变更原因</td>
                </tr>
                <tr align="center">
                  <td colspan="10" width="100%">
                    <el-form-item :show-message="false" prop="changeReason">
                      <el-input
                        v-model="flowFormData.changeReason"
                        :readonly="flowConfig.currentRule!=flowConfig.rules.node_1||flowConfig.formState.readonly"
                        type="textarea"
                        :rows="10"
                        placeholder="请输入意见"
                        resize="none"
                      ></el-input>
                    </el-form-item>
                  </td>
                </tr>
                <tr align="center">
                  <td class="form-label" colspan="3" height="34px" width="30%">总体意见</td>
                  <td class="form-label" colspan="3" height="34px" width="30%">咨询意见</td>
                  <td class="form-label" colspan="4" height="34px" width="40%">业主意见</td>
                </tr>

                <tr align="center">
                  <td colspan="3" width="30%">
                    <el-form-item :show-message="false" prop="overallSuggestion">
                      <el-input
                        v-model="flowFormData.overallSuggestion"
                        :readonly="flowConfig.currentRule!=flowConfig.rules.node_2||flowConfig.formState.readonly"
                        type="textarea"
                        :rows="10"
                        placeholder="请输入意见"
                        resize="none"
                      ></el-input>
                    </el-form-item>
                  </td>
                  <td colspan="3" width="30%">
                    <el-form-item :show-message="false" prop="consultantSuggestion">
                      <el-input
                        v-model="flowFormData.consultantSuggestion"
                        :readonly="flowConfig.currentRule!==flowConfig.rules.node_3||flowConfig.formState.readonly"
                        type="textarea"
                        :rows="10"
                        placeholder="请输入意见"
                        resize="none"
                      ></el-input>
                    </el-form-item>
                  </td>
                  <td colspan="4" width="40%">
                    <el-form-item :show-message="false" prop="ownerSuggestion">
                      <el-input
                        :readonly="flowConfig.currentRule!=flowConfig.rules.node_4||flowConfig.formState.readonly"
                        v-model="flowFormData.ownerSuggestion"
                        type="textarea"
                        :rows="10"
                        placeholder="请输入意见"
                        resize="none"
                      ></el-input>
                    </el-form-item>
                  </td>
                </tr>
              </table>
              <el-form-item class="btns">
                <el-button
                  v-if="!flowConfig.formState.readonly"
                  @click="resolveflow"
                  type="primary"
                >{{flowConfig.currentBtn.resolveText}}</el-button>
                <el-button
                  v-if="!flowConfig.formState.readonly"
                  @click="rejectflow"
                  type="info"
                >{{flowConfig.currentBtn.rejectText}}</el-button>
                <el-button @click="cancelflow">{{flowConfig.currentBtn.cancelText}}</el-button>
              </el-form-item>
            </el-form>
            <el-collapse>
              <el-collapse-item title="处理意见区" name="comment">
                <el-timeline style="text-align:left" :reverse="true">
                  <el-timeline-item
                    v-for="(activity, index) in flowCommentsData"
                    :key="index"
                    :timestamp="activity.time"
                    v-show="activity.message !==''"
                  >
                    <el-card>
                      <h3>审批意见</h3>
                      <h4>{{activity.message}}</h4>
                      <p>{{'单位：'+activity.group_name}}</p>
                      <p>{{'审核人：'+activity.approver}}</p>
                      <!-- <p>{{'联系方式：'+activity.cantact}}</p>
                    <div style="margin-left:100px" v-if="activity.children.length>0">
                      <h3>回复</h3>
                      <h4>{{activity.children.length>0?activity.children[0].message:''}}</h4>
                      <p>{{'单位：'+activity.children[0].group_name}}</p>
                      <p>{{'回复人：'+activity.children[0].approver}}</p>
                      <p>{{'回复时间：'+activity.children[0].time}}</p>
                      </div>-->
                    </el-card>
                  </el-timeline-item>
                </el-timeline>
              </el-collapse-item>
            </el-collapse>
          </div>
          <myExportTableBtn :configs="exportTableConfig"></myExportTableBtn>
        </div>
      </el-col>
    </el-col>
  </el-row>
</template>

<script>
import myTableX from "@/components/base/tableX";
import myStepX from "@/components/base/stepX";
import { formatDate } from "@/utils/date";
import myAnnounceDlg from "@/components/base/announceDlg";
import myExportTableBtn from "@/components/base/exportTableBtn";
// 全局变量
var glbVar = {};
var taskListParam = {};

var refRoles = []; //流程涉及到的角色列表

export default {
  inject: ["reload"],
  components: {
    myTableX,
    myStepX,
    myAnnounceDlg,
    myExportTableBtn
  },

  // 初始化
  created() {
    glbVar.subjectId = this.$store.state.projectInfo.projectName;
    glbVar.user = this.$store.state.m_user.userInfo;
    this.flowFormData.subjectId = glbVar.subjectId;
    this.flowTaskData.userid = glbVar.user.id;
    this.flowTaskData.path = this.$route.path;

    //控制添加按钮权限
    if (glbVar.user.roleId < 4 || glbVar.user.roleId > 7) {
      this.todoConfig.configs.operationBtn.add = false;
    }

    // 初始化流程节点信息

    // this.$api.startitem
    //   .getstage({ flowid: 3, userid: glbVar.user.id })
    //   .then(res => {
    //     if (res.code === 200) {
    //       console.log("step res.data");

    //       console.log(res.data);

    //       this.flowConfig.stepConfig.data = res.data;
    //       this.flowConfig.stepConfig.sequence = res.data.map(item => {
    //         return item.flow_node_id;
    //       });
    //     } else {
    //       this.$message.error("获取流程参数错误");
    //     }
    //   })
    //   .catch(err => {
    //     console.log("获取参数错误");
    //     this.$message.error("获取流程参数错误:" + err);
    //   });

    // 初始化工程数据列表
    this.$api.project
      .listByCompany(glbVar.subjectId, glbVar.user.company)
      .then(res => {
        // console.log(res);
        if (res.code === 200) {
          this.dictData.prolist = res.data;
        }
      });

    let query = this.$route.query;
    if (query.id && query.todo) {
      this.config.tabShow = false;
      this.$api.workloadchange
        .getbyid(query.id)
        .then(res => {
          if (res.code === 200) {
            this.handleTodo(res.data);
          } else {
            console.log("get todo business detail:" + res.msg);
          }
        })
        .catch(err => {
          console.log("get todo business detail:" + err);
          this.$message.info("get todo business detail:" + err);
        });
    } else if (query.id && !query.todo) {
      this.config.tabShow = false;
      this.$api.workloadchange
        .getbyid(query.remark)
        .then(res => {
          if (res.code === 200) {
            this.viewDetail(res.data);
          } else {
            console.log("get todo business detail:" + res.msg);
          }
        })
        .catch(err => {
          console.log("get todo business detail:" + err);
          this.$message.info("get todo business detail:" + err);
        });
    }
  },

  mounted() {
    console.log("mount 刷新了");

    taskListParam = {
      projectId: glbVar.subjectId,
      businessType: 10,
      userId: glbVar.user.id
    };

    this.initList(taskListParam);

    //文件导出 是否可见
    this.exportTableConfig.isshown =
      this.flowConfig.formState.readonly && this.flowState.step == 4;
    this.exportTableConfig.subjectId = glbVar.subjectId;
  },

  watch: {
    $route(to, from) {
      if (to.path === from.path && to.query !== from.query) {
        this.initList(taskListParam);
      }
    },
    //文件导出 是否可见 监听变化
    "flowConfig.formState.readonly"(newstate, old) {
      this.exportTableConfig.isshown =
        this.flowConfig.formState.readonly && this.flowState.step == 4;
    },
    "flowState.step"(newstate, old) {
      if (newstate == 4) {
        this.exportTableConfig.isshown =
          this.flowConfig.formState.readonly && this.flowState.step == 4;
      }
    },
    flowFormData(newstate, old) {
      this.exportTableConfig.flowFormData = newstate;
    }
  },

  data() {
    let glbcolumns = [
      { field: "tenders", name: "标段" },
      { field: "workloadId", name: "文件编号" },
      { field: "projectId", name: "工程编号" },
      { field: "projectName", name: "工程名称" }
      // { field: "", name: "" }
    ];
    return {
      activities: [
        {
          content: "活动按期开始",
          timestamp: "2018-04-15"
        },
        {
          content: "通过审核",
          timestamp: "2018-04-13"
        },
        {
          content: "创建成功",
          timestamp: "2018-04-11"
        }
      ],

      //导出按钮Config
      exportTableConfig: {
        isshown: false,
        subjectId: glbVar.subjectId,
        model: 10,
        flowFormData: this.flowFormData
      },
      config: {
        tabShow: true,
        todoCount: 0,
        loading: false
      },
      tabConfig: {
        activeName: "todo"
      },
      todoConfig: {
        configs: {
          nodata: "暂无待办事项",
          columns: glbcolumns,
          showFilterRow: {
            show: false
          },
          operationBtn: {
            show: true,
            add: true,
            addtext: "发起申请"
          },
          operationCol: {
            show: true,
            edit: true,
            options: {
              edit: {
                text: "处理"
              }
            }
          }
        },
        data: []
      },

      runingTaskConfig: {
        configs: {
          nodata: "暂无运行记录",
          columns: glbcolumns,
          showFilterRow: {
            show: true
          },
          operationBtn: {
            show: false
          },
          operationCol: {
            show: true,
            view: true,
            options: {
              view: {
                text: "详情"
              }
            }
          }
        },
        data: []
      },

      completedTaskConfig: {
        configs: {
          nodata: "暂无历史记录",
          columns: glbcolumns,
          showFilterRow: {
            show: true
          },
          operationBtn: {
            show: false
          },
          operationCol: {
            show: true,
            view: true,
            options: {
              view: {
                text: "详情"
              }
            }
          }
        },
        data: []
      },

      flowState: {
        step: 0,
        executionId: null,
        flowNodeId: null,
        message: "",
        parent: 0,
        procInstId: null,
        userId: null,
        firstSend: true
      },

      flowConfig: {
        stepConfig: {
          active: 0,
          processstatus: "process",
          sequence: [],
          data: [
            { flow_node_name: "勘察单位提交工作量变更申请", description: "" },
            { flow_node_name: "勘察总体审核", description: "" },
            { flow_node_name: "咨询单位审核", description: "" },
            { flow_node_name: "建设单位审核", description: "" }
          ]
        },
        formTitle: "北京城市副中心站工作量变更申请记录",
        currentRule: {},
        currentBtn: {
          resolveText: "发送",
          rejectText: "重置",
          cancelText: "返回"
        },
        rules: {
          node_1: {
            mainSending: [{ required: true, trigger: "change" }],
            copySending: [{ required: true, trigger: "change" }],
            projectId: [{ required: true, trigger: "change" }],
            projectName: [{ required: true, trigger: "change" }],
            applicant: [{ required: true, trigger: "blur" }],
            changeReason: [{ required: true, trigger: "blur" }]
          },
          node_2: {
            overallConfirmingPerson: [{ required: true, trigger: "blur" }],
            overallSuggestion: [{ required: true, trigger: "blur" }]
          },
          node_3: {
            consultantConfirmingPerson: [{ required: true, trigger: "blur" }],
            consultantSuggestion: [{ required: true, trigger: "blur" }]
          },
          node_4: {
            ownerConfirmingPerson: [{ required: true, trigger: "blur" }],
            ownerSuggestion: [{ required: true, trigger: "blur" }]
          }
        },
        formState: {
          readonly: false
        }
      },

      //公告config
      myAnnounceDlgConfig: {
        dialogFormVisible: false,
        isupdate: false,
        announceInfo: {
          remark: "",
          subject_id: "",
          url: "",
          notice_type: "工作量变更",
          role: [],
          create_by: "",
          create_time: "",
          notice_content: "",
          notice_title: "",
          path: "",
          remark: ""
        }
      },

      // 数据字典数据
      dictData: {
        //工程列表
        prolist: []
      },

      currRecordTime: "",

      flowFormData: {
        changeReason: "",
        copySending: "",
        drill: "",
        drillFootage: "",
        mainSending: "",
        major: "",
        monitoringWell: "",
        monitoringWellFootage: "",
        projectId: "",
        projectName: "",
        subjectId: "",
        tenders: "01标段/北京市勘察设计研究院有限公司",
        testWell: "",
        testWellFootage: "",
        applicant: "",
        overallConfirmingPerson: "",
        overallSuggestion: "",
        overallConfirmingDate: "",
        consultantConfirmingPerson: "",
        consultantSuggestion: "",
        consultantConfirmingDate: "",
        ownerConfirmingPerson: "",
        ownerSuggestion: "",
        ownerConfirmingDate: ""

        // createTime: null,
      },
      copySendingArr: [],

      flowCommentsData: [],
      // overallConfirmingPerson: "",
      // overallConfirmingDate: null,
      // consultantConfirmingPerson: "",
      // consultantConfirmingDate: "",
      // ownerConfirmingPerson: "",
      // ownerConfirmingDate: null,
      // overallSuggestion: "",
      // consultantSuggestion: "",
      // ownerSuggestion: "",

      flowTaskData: {
        businessid: null,
        businesstype: "10",
        major: "",
        userid: null
      }
    };
  },

  methods: {
    exportTable() {
      //数据准备

      console.log("look at me");
      console.log(this.flowFormData);

      this.$confirm("是否导出制式表格?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$api.exportTable
            .getUrl(
              {
                subjectId: glbVar.subjectId,
                model: 10
              },
              this.flowFormData
            )
            .then(res => {
              if (res.code == 200) {
                this.$message.success("导出成功!");
                window.open(res.data.url);
                // this.listShow = !this.listShow;
                // this.initList();
              }
            })
            .catch(err => {
              this.$message.error("导出失败!!" + err);
            });
        })
        .catch(() => {
          return;
        });
    },

    //监听上传公告结果
    operationState(msg) {
      console.log(msg);
      if (msg) {
        this.$message.success("发布成功");
        this.config.tableShow = true;
      } else {
        this.$message.error("发布失败");
      }
      this.initList(taskListParam);
      this.config.loading = false;
    },

    initList(taskListParam) {
      // 初始化列表
      this.$api.startitem
        .getmytasklist(taskListParam)
        .then(res => {
          if (res.code === 200) {
            if (!res.data || res.data.length === 0) {
              this.todoConfig.data = [];
              // this.$message.info("暂无待办事项");
              return;
            }
            this.$api.workloadchange
              .getbyids({ ids: res.data })
              .then(res => {
                if (res.code === 200) {
                  this.todoConfig.data = res.data;
                } else {
                  console.log("get todo business detail:" + res.msg);
                }
              })
              .catch(err => {
                console.log("get todo business detail:" + err);
                this.$message.info("get todo business detail:" + err);
              });
          } else {
            console.log("get todo ids res:" + res.msg);
          }
        })
        .catch(err => {
          console.log("get todo ids res:" + err);
        });

      this.$api.startitem
        .getprocessinglist(taskListParam)
        .then(res => {
          if (res.code === 200) {
            console.log("lenght:" + res.data.length);

            if (!res.data || res.data.length === 0) {
              this.runingTaskConfig.data = [];
              // this.$message.info("暂无运行流程");
              return;
            }
            this.$api.workloadchange
              .getbyids({ ids: res.data })
              .then(res => {
                if (res.code === 200) {
                  this.runingTaskConfig.data = res.data;
                } else {
                  console.log("get runing business detail:" + res.msg);
                }
              })
              .catch(err => {
                console.log("get runing business detail:" + err);
                this.$message.info("get runing business detail:" + err);
              });
          }
        })
        .catch(err => {
          console.log("get runing ids res:" + err);
        });
      this.$api.startitem
        .getfinishedlist(taskListParam)
        .then(res => {
          if (res.code === 200) {
            if (!res.data || res.data.length === 0) {
              this.completedTaskConfig.data = [];
              // this.$message.info("暂无历史流程");
              return;
            }
            this.$api.workloadchange
              .getbyids({ ids: res.data })
              .then(res => {
                if (res.code === 200) {
                  this.completedTaskConfig.data = res.data;
                } else {
                  console.log("get finished business detail:" + res.msg);
                }
              })
              .catch(err => {
                console.log("get finished business detail:" + err);
                this.$message.info("get finished business detail:" + err);
              });
          }
        })
        .catch(err => {
          console.log("get finished business detail:" + err);
        });
    },

    /**
     * @description: 发起一个变更申请,预操作
     */
    addNewApply() {
      this.flowConfig.formState.readonly = false;
      this.flowConfig.stepConfig.active = 0;
      this.config.tabShow = false;
      this.flowConfig.currentRule = this.flowConfig.rules.node_1;
      //置空业务表
      this.flowFormData.tenders =
        glbVar.user.nick_name + "/" + glbVar.user.company;
      this.flowFormData.subjectId = glbVar.subjectId;
      this.flowFormData.projectId = "";
      this.flowFormData.projectName = "";
      this.flowFormData.mainSending = "";
      this.flowFormData.copySending = "";
      this.flowFormData.changeReason = "";
      this.flowFormData.applicant = "";
      this.flowFormData.drill = "";
      this.flowFormData.drillFootage = "";
      this.flowFormData.monitoringWell = "";
      this.flowFormData.monitoringWellFootage = "";
      this.flowFormData.testWell = "";
      this.flowFormData.testWellFootage = "";
      this.flowFormData.overallConfirmingPerson = "";
      this.flowFormData.overallSuggestion = "";
      this.flowFormData.overallConfirmingDate = "";
      this.flowFormData.consultantConfirmingPerson = "";
      this.flowFormData.consultantSuggestion = "";
      this.flowFormData.consultantConfirmingDate = "";
      this.flowFormData.ownerConfirmingPerson = "";
      this.flowFormData.ownerSuggestion = "";
      this.flowFormData.ownerConfirmingDate = "";

      this.flowFormData.createTime = formatDate(
        new Date(),
        "yyyy-MM-dd hh:mm:ss"
      );

      this.copySendingArr = "";
    },

    /**
     * @description: 处理待办任务
     */
    handleTodo(row) {
      let id = row.id;
      //   this.flowFormData = row;

      this.flowFormData.changeReason = row.changeReason;
      this.flowFormData.copySending = row.copySending;
      this.flowFormData.drill = row.drill;
      this.flowFormData.drillFootage = row.drillFootage;
      this.flowFormData.mainSending = row.mainSending;
      this.flowFormData.major = row.major;
      this.flowFormData.monitoringWell = row.monitoringWell;
      this.flowFormData.monitoringWellFootage = row.monitoringWellFootage;
      this.flowFormData.projectId = row.projectId;
      this.flowFormData.projectName = row.projectName;
      this.flowFormData.subjectId = row.subjectId;
      this.flowFormData.tenders = row.tenders;
      this.flowFormData.testWell = row.testWell;
      this.flowFormData.testWellFootage = row.testWellFootage;
      this.flowFormData.applicant = row.applicant;
      this.flowFormData.createTime = row.createTime;
      this.flowFormData.id = id;
      this.initComments(id);

      //抄送单位读取
      this.copySendingArr = [];
      if (this.flowFormData.copySending != "") {
        this.flowFormData.copySending.split("/").forEach(it => {
          if (it != "") {
            this.copySendingArr.push(it);
          }
        });
      }

      // 初始化公告默认角色列表
      this.$api.startitem.getRoleByRuningInfo(10, id).then(res => {
        if (res.code === 200) {
          refRoles = res.data;
        }
      });

      this.$api.startitem
        .isfirsttime({
          businesstype: 10,
          businessid: id
        })
        .then(res => {
          if (res.code === 200) {
            if (res.data) {
              this.flowState.firstSend = true;
            } else {
              this.flowState.firstSend = false;
            }

            this.$api.startitem
              .getworkflow({
                businessType: 10,
                businessId: id
              })
              .then(res => {
                if (res.code === 200) {
                  let { id, proc_inst_id } = res.data;
                  this.$api.startitem
                    .getcurrentstage({
                      executionId: id,
                      procInstId: proc_inst_id
                    })
                    .then(res => {
                      if (res.code === 200) {
                        this.flowConfig.formState.readonly = false;
                        this.flowConfig.stepConfig.active = res.data[0];
                        this.changeStep(res.data[0]);

                        //写对应时间
                        let index = this.flowState.step;
                        if (index === 1) {
                          this.flowFormData.overallConfirmingDate = formatDate(
                            new Date(),
                            "yyyy-MM-dd hh:mm:ss"
                          );
                        } else if (index === 2) {
                          this.flowFormData.consultantConfirmingDate = formatDate(
                            new Date(),
                            "yyyy-MM-dd hh:mm:ss"
                          );
                        } else if (index === 3) {
                          this.flowFormData.ownerConfirmingDate = formatDate(
                            new Date(),
                            "yyyy-MM-dd hh:mm:ss"
                          );
                        }

                        //写流程信息
                        this.flowState.executionId = id;
                        this.flowState.flowNodeId = res.data[1];
                        this.flowState.message = "";
                        this.flowState.procInstId = proc_inst_id;
                        this.flowState.time = formatDate(
                          new Date(),
                          "yyyy-MM-dd hh:mm:ss"
                        );
                        this.flowState.userId = glbVar.user.id;

                        this.config.tabShow = false;
                      }
                    });
                }
              });
          }
        });
    },

    changeStep(step) {
      console.log("step:" + step);
      this.flowState.step = step;
      this.flowConfig.currentRule = this.flowConfig.rules["node_" + (step + 1)];

      if (step === 0) {
        if (!this.flowState.firstSend) {
          this.flowConfig.currentBtn = {
            resolveText: "重新发送",
            rejectText: "重置",
            cancelText: "返回"
          };

          // 	this.flowFormData.createTime = formatDate(
          //   new Date(),
          //   "yyyy-MM-dd hh:mm:ss"
          // );

          // this.flowCommentsData.overallConfirmingPerson = "";
          // this.flowCommentsData.overallConfirmingDate = null;
          // this.flowCommentsData.ownerConfirmingPerson = "";
          // this.flowCommentsData.ownerConfirmingDate = null;
          // // this.flowCommentsData.replyReason = "";
          // this.flowCommentsData.overallSuggestion = "";
          // this.flowCommentsData.ownerSuggestion = "";
        } else {
          this.flowConfig.currentBtn = {
            resolveText: "发送",
            rejectText: "重置",
            cancelText: "返回"
          };
        }
      } else {
        // this.flowFormData.createTime = this.currRecordTime;
        this.flowConfig.currentBtn = {
          resolveText: "通过",
          rejectText: "驳回",
          cancelText: "取消"
        };
      }

      //   if (step === 1 && !this.flowConfig.formState.readonly) {
      //     this.flowCommentsData.overallConfirmingDate = formatDate(
      //       new Date(),
      //       "yyyy-MM-dd hh:mm:ss"
      //     );
      //   } else {
      //     if (step === 2 && !this.flowConfig.formState.readonly) {
      //       this.flowCommentsData.ownerConfirmingDate = formatDate(
      //         new Date(),
      //         "yyyy-MM-dd hh:mm:ss"
      //       );
      //     }
      //   }
    },

    // 查看流程运行详情,运行时
    viewDetail(row) {
      // console.log(row);

      let id = row.id;
      this.flowFormData = row;
      this.initComments(id);
      //抄送单位读取
      this.copySendingArr = [];
      if (this.flowFormData.copySending != "") {
        this.flowFormData.copySending.split("/").forEach(it => {
          if (it != "") {
            this.copySendingArr.push(it);
          }
        });
      }

      this.$api.startitem
        .getworkflow({
          businessType: 10,
          businessId: id
        })
        .then(res => {
          if (res.code === 200) {
            let { id, proc_inst_id } = res.data;
            this.$api.startitem
              .getcurrentstage({
                executionId: id,
                procInstId: proc_inst_id
              })
              .then(res => {
                if (res.code === 200) {
                  this.flowConfig.formState.readonly = true;
                  this.flowConfig.stepConfig.active = res.data[0];
                  this.changeStep(res.data[0]);
                  this.config.tabShow = false;
                }
              });
          }
        });
    },

    //改变projectId
    changeProjectId(value) {
      this.dictData.prolist.forEach(item => {
        if (item.projectId === value) {
          this.flowFormData.projectName = item.projectName;
          this.flowFormData.major = item.major;
          this.flowTaskData.major = item.major;
          return;
        }
      });
    },

    // //选择项目名称
    // changeProjectName(value) {
    //   this.dictData.prolist.forEach(item => {
    //     if (item.projectName === value) {
    //       this.flowFormData.projectId = item.projectId;
    //       this.flowFormData.major = item.major;
    //       this.flowTaskData.major = item.major;
    //       return;
    //     }
    //   });
    // },
    //选择抄送单位
    copySendingChange() {
      console.log(this.copySendingArr);
      this.flowFormData.copySending = "";
      if (this.copySendingArr) {
        this.copySendingArr.forEach(item => {
          this.flowFormData.copySending += "/" + item;
        });
      }
      this.flowFormData.copySending = this.flowFormData.copySending.substr(1);
    },
    // 执行流程
    resolveflow() {
      // 保存一条工期工作量变更单信息
      // 预验证
      this.$refs.flowFormData.validate(res => {
        if (res) {
          this.$confirm("提交操作后不可更改，是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              this.handleResolve();
            })
            .catch(() => {
              return;
            });
        } else {
          this.$message.warning("请检查必填项");
        }
      });
    },

    handleResolve() {
      if (this.flowState.step === 0 && this.flowState.firstSend) {
        console.log("我开始了");
        this.config.loading = true;
        this.$api.workloadchange
          .add(this.flowFormData)
          .then(res => {
            console.log("add workload change res");
            console.log(res);
            if (res.code === 200) {
              console.log(200);
              console.log(res);
              this.$message.success("发送成功：申请已提交勘察总体审批");
              this.config.tabShow = true;
              this.flowTaskData.businessid = res.data;
              this.$api.startitem
                .starttask(this.flowTaskData)
                .then(res => {
                  this.config.loading = false;
                  if (res.code === 200) {
                    this.$message.success("发送成功：申请已提交勘察总体审批");
                    this.config.tabShow = true;
                    this.initList(taskListParam);
                  } else {
                    this.$message.error("发送失败：" + res.msg);
                  }
                })
                .catch(err => {
                  this.$message.error("发送失败：" + err);
                });
            } else {
              this.config.loading = false;
              this.$message.error("提交表单失败:" + res.msg);
            }
          })
          .catch(err => {
            this.config.loading = false;
            this.$message.error("提交表单失败:" + err);
          });
      } else {
        // 走审批接口
        if (this.flowState.step === 0) {
          console.log(this.flowFormData);
          console.log("wolaigenxin");

          this.$api.workloadchange.modify(this.flowFormData).then(res => {
            if (res.code === 200) {
              this.flowState.approver = this.currApproveInfo.approver;
              this.flowState.message = this.currApproveInfo.message;
              this.$api.startitem.approve([this.flowState]).then(res => {
                console.log("approve param");
                console.log(this.flowState);
                if (res.code === 200) {
                  this.$message.success("操作成功");
                  this.config.tabShow = true;
                  this.initList(taskListParam);
                  if (this.$route.query === {}) {
                    this.initList(taskListParam);
                  } else {
                    this.$router.replace({
                      path: this.$route.path,
                      query: {}
                    });
                  }
                }
              });
            }
          });
        } else {
          this.flowState.approver = this.currApproveInfo.approver;
          this.flowState.message = this.currApproveInfo.message;
          this.$api.startitem.approve([this.flowState]).then(result => {
            console.log(this.flowState);
            if (result.code === 200) {
              this.$message.success("操作成功");
              this.config.tabShow = true;
              this.initList(taskListParam);

              if (this.flowState.step === 3) {
                console.log("是3");
                // this.myAnnounceDlgConfig.isupdate = false;
                // this.myAnnounceDlgConfig.announceInfo.create_by = this.flowFormData.applicant;
                // this.myAnnounceDlgConfig.announceInfo.notice_title =
                //   "工作量变更完成";
                // this.myAnnounceDlgConfig.announceInfo.remark = this.flowFormData.id;
                // this.myAnnounceDlgConfig.announceInfo.subject_id =
                //   glbVar.subjectId;
                // this.myAnnounceDlgConfig.announceInfo.notice_content = this.flowFormData.changeReason;
                // this.myAnnounceDlgConfig.dialogFormVisible = true;
                let announce = {
                  subject_id: this.flowFormData.subjectId,
                  url: "",
                  remark: this.flowFormData.id,
                  notice_type: "工作量变更",
                  role: refRoles,
                  create_by: this.flowFormData.applicant,
                  create_time: this.flowFormData.createTime,
                  notice_content:
                    "【" +
                    this.flowFormData.tenders.split("/")[0] +
                    "】工作量变更审核完成",
                  notice_title:
                    "【" +
                    this.flowFormData.tenders.split("/")[0] +
                    "】工作量变更审核完成",
                  path: this.$route.path
                };

                this.$api.announce
                  .add(announce)
                  .then(res => {
                    this.config.loading = false;
                    if (res.code == 200) {
                      this.$message.success("操作成功!");
                      this.config.tabShow = true;
                      this.initList(taskListParam);
                    } else {
                      this.$message.error("操作失败!" + res.msg);
                    }
                  })
                  .catch(err => {
                    this.config.loading = false;
                    this.$message.error("操作失败!" + err);
                  });
              } else {
                this.config.tabShow = true;
                this.initList(taskListParam);
                if (this.$route.query === {}) {
                  this.initList(taskListParam);
                } else {
                  this.$router.replace({
                    path: this.$route.path,
                    query: {}
                  });
                }
              }
            } else {
              this.config.loading = false;
              this.$message.error("通过流程失败:" + res.msg);
            }
          });
        }
      }
    },

    // 拒绝流程
    rejectflow() {
      if (this.flowState.step === 0) {
        this.flowFormData.projectId = "";
        this.flowFormData.projectName = "";
        this.flowFormData.mainSending = "";
        this.flowFormData.copySending = "";
        this.flowFormData.applicant = "";
        this.flowFormData.replyReason = "";
        // this.flowFormData.projectId = "";
        // this.flowFormData.projectId = "";
        return;
      }
      this.$refs.flowFormData.validate(res => {
        if (res) {
          this.$confirm("提交操作后不可更改，是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              // 走审批拒绝接口
              this.$api.workloadchange.modify(this.flowFormData).then(res => {
                if (res.code === 200) {
                  this.flowState.approver = this.currApproveInfo.approver;
                  this.flowState.message = this.currApproveInfo.message;
                  this.$api.startitem.disapprove(this.flowState).then(res => {
                    console.log("disapprove param");
                    console.log(this.flowState);
                    if (res.code === 200) {
                      this.$message.success("操作成功");
                      this.config.tabShow = true;
                      this.initList(taskListParam);
                      if (this.$route.query === {}) {
                        this.initList(taskListParam);
                      } else {
                        this.$router.replace({
                          path: this.$route.path,
                          query: {}
                        });
                      }
                    }
                  });
                }
              });
            })
            .catch(() => {
              return;
            });
        } else {
          this.$message.warning("请检查必填项");
        }
      });
    },

    initComments(id) {
      this.$api.startitem
        .getcomment({ businessType: 10, businessId: id })
        .then(res => {
          if (res.code === 200) {
            //展示全部的回复细节
            this.flowCommentsData = res.data;

            res.data.forEach(item => {
              if (item.group_name == "勘察总体") {
                this.flowFormData.overallConfirmingPerson = item.approver;
                this.flowFormData.overallSuggestion = item.message;
                this.flowFormData.overallConfirmingDate = item.time;
              } else if (item.group_name == "咨询单位") {
                this.flowFormData.consultantConfirmingPerson = item.approver;
                this.flowFormData.consultantSuggestion = item.message;
                this.flowFormData.consultantConfirmingDate = item.time;
              } else if (item.group_name == "建设单位") {
                this.flowFormData.ownerConfirmingPerson = item.approver;
                this.flowFormData.ownerSuggestion = item.message;
                this.flowFormData.ownerConfirmingDate = item.time;
              }
            });
          } else {
            console.log("get comment data err res.msg:" + res.msg);
          }
        })
        .catch(err => {
          console.log("get comment data err:" + err);
        });
    },

    // 取消流程
    cancelflow() {
      this.config.tabShow = true;
    }
  },

  computed: {
    currApproveInfo() {
      let index = this.flowState.step;

      if (index === 1) {
        return {
          approver: this.flowFormData.overallConfirmingPerson,
          message: this.flowFormData.overallSuggestion
        };
      } else if (index === 2) {
        return {
          approver: this.flowFormData.consultantConfirmingPerson,
          message: this.flowFormData.consultantSuggestion
        };
      } else if (index === 3) {
        return {
          approver: this.flowFormData.ownerConfirmingPerson,
          message: this.flowFormData.ownerSuggestion
        };
      } else {
        return {
          approver: this.flowFormData.applicant,
          message: "重新发起申请"
        };
      }
    }
  }
};
</script>
<style lang='less' scoped>
.col-flex {
  box-sizing: border-box;
  padding-top: 30px;
  height: 100%;

  .breadcrumb-container {
    height: 30px;
    margin-top: -20px;
  }

  .maincont-container {
    height: 100%;
    margin-top: 3px;
    .tab-container {
      height: 100%;
      /deep/.el-tabs {
        height: 100%;

        .el-tabs__header {
          margin: 0;
        }
        .el-tabs__content {
          height: calc(~"100% - 40px");
          .el-tab-pane {
            height: 100%;
          }
        }
      }
    }
    .flow-container {
      height: 100%;
      width: 100%;
      box-sizing: border-box;
      padding-top: 60px;

      .flow-step {
        width: 100%;
        height: 60px;
        margin-top: -60px;
      }

      .flow-form {
        text-align: center;
        height: calc(~"100% - 10px");
        // height: 100%;

        table .form-label {
          background-color: #efefef;
        }

        .form-title {
          margin: 10px !important;
        }

        .form-data {
          border-collapse: collapse;
          margin: auto;
          width: 70%;
          font-size: 13px;
        }
        .btns {
          width: 70%;
          margin: 20px auto;
          display: flex;
          justify-content: flex-end;
        }
      }
    }
  }

  .scrollable {
    overflow: auto;
  }

  /deep/.el-form-item {
    padding: 0px;
    margin: 0px;
    .el-form-item__content {
      line-height: normal;
    }
    .el-select {
      display: block;
    }
  }

  /deep/.addbutton-con {
    button {
      box-shadow: 0px 0px 0px 3px #66b1ff55;
    }
    i {
      font-size: 20px;
    }
    z-index: 100;
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 5px;
    height: 40px;
    border-radius: 50%;
    // box-shadow: 0px 0px 0px 2px gray;
  }
}
</style>